import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import useComponentLoaded from '../hooks/useComponentLoaded';

type MenuItem = Required<MenuProps>['items'][number];

const App: React.FC = () => {
  const [current, setCurrent] = useState('mail');
  const navigate = useNavigate();
  useComponentLoaded('Navbar');

  const items: MenuItem[] = [
    {
      label: '首页',
      key: 'mail',
      icon: <MailOutlined />,
    
    },
    {
      label: '测试',
      key: 'app',
      icon: <AppstoreOutlined />,
      disabled: false,
    },
    {
      label: '积木',
      key: 'jimu',
      icon: <AppstoreOutlined />,
      disabled: false,
    },
    {
      label: '登录',
      key: 'login',
      icon: <AppstoreOutlined />,
      disabled: false,
    },
    {
      label: 'Navigation Three - Submenu',
      key: 'SubMenu',
      icon: <SettingOutlined />,
      children: [
        {
          type: 'group',
          label: 'Item 1',
          children: [
            { label: 'Option 1', key: 'setting:1' },
            { label: 'Option 2', key: 'setting:2' },
          ],
        },
        {
          type: 'group',
          label: 'Item 2',
          children: [
            { label: 'Option 3', key: 'setting:3' },
            { label: 'Option 4', key: 'setting:4' },
          ],
        },
      ],
    },
    {
      key: 'alipay',
      label: (
        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
          Navigation Four - Link
        </a>
      ),
    },
  ];

  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
    if (e.key === 'app') {
      navigate('/test');
    }else if (e.key === 'mail') {
      navigate('/');
    }else if (e.key === 'jimu') {
      navigate('/jimu');
    }else if (e.key === 'login') {
      navigate('/login');
    }
  };
  

  return <div className="navbar-fixed"><Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} /></div>;
};

export default App;